<script setup>

import {onMounted, ref} from 'vue'
import axios from "@/axios";
const batch = ref('11月')
const percentage = ref(0)
const path = ref('/hddisk/data_backup/网管/')
const  chunkSize=1024*1024*5
let  idx=0
let  toltal=0
let file
const loading = ref(false)
function handleChange(e){
  file = e.target.files[0];
  toltal=Math.ceil(file.size / chunkSize)
  upload()
}
function upload(){
  if(idx<toltal){
    console.log(idx+1)
    const start = idx*chunkSize;
    const end = Math.min(start +chunkSize, file.size);
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('path', path.value);
    formData.append('batch', batch.value);
    formData.append('count',toltal)
    formData.append('part',idx+1)
    formData.append('fileType','网管')
    formData.append('fileName',file.name)
    axios.post('/anh/file/slice2', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }).then(()=>{
      idx++;
      upload()
      percentage.value=idx*100/toltal
    }).catch(e=>{
      console.log(e)
    });
  }
}
const tableData =ref()
onMounted(()=>{
  axios.get('/anh/file/getFileList?fileType=网管&size=10&page=1').then(res=>{
   tableData.value=res.data.data.records
  })
})
function unzip(e){
  const formData = new FormData();
  loading.value=true;
  formData.append('in',e.filePath)
  formData.append('out','/hddisk/data_backup/网管/'+e.batch)
  axios.post('/anh/file/unzip',formData).catch(e=>{
    console.log(e)
  }).finally(r=>{
    console.log(r)
    loading.value=false
  })
  console.log(e)
}

const headerStyle = {
  background: 'linear-gradient(90deg, #4f8cff 0%, #67e8f9 100%)',
  color: '#fff',
  fontWeight: 'bold',
  fontSize: '16px',
  letterSpacing: '1px',
}
</script>

<template>
  <div class="net-bg">
    <el-card class="net-card" shadow="hover">
      <div class="net-header">
        <span class="net-title">网管文件上传与管理</span>
        <el-form :inline="true" class="net-form">
          <el-form-item label="批次">
            <el-input v-model="batch" style="width: 180px" placeholder="输入批次" />
          </el-form-item>
          <el-form-item label="上传路径">
            <el-input v-model="path" style="width: 220px" placeholder="输入上传路径"/>
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              :onchange="handleChange"
              :auto-upload="false"
              :show-file-list="false"
            >
              <el-button type="primary">上传网管文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <el-progress :percentage="percentage" color="#4f8cff" :stroke-width="20" class="net-progress"/>
      <el-table :data="tableData"  border :header-cell-style="headerStyle" v-loading="loading">
        <el-table-column prop="fileName" label="文件名" width="220" align="center" />
        <el-table-column prop="batch" label="批次" width="120" align="center" />
        <el-table-column prop="time" label="上传时间" width="200" align="center" />
        <el-table-column label="操作" width="140" align="center">
          <template #default="scope">
            <el-button type="success" size="small" style="padding: 0 12px; min-width: 60px;" @click="unzip(scope.row)">解压</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.net-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f7fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.net-card {
  width: 900px;
  border-radius: 18px;
  box-shadow: 0 6px 32px 0 rgba(79,140,255,0.10), 0 1.5px 6px 0 rgba(79,140,255,0.08);
  background: #fff;
  padding: 16px 14px;
}
.net-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.net-title {
  font-size: 26px;
  font-weight: 700;
  color: #2d3a4b;
  letter-spacing: 1px;
}
.net-form {
  margin-left: 24px;
}
.net-progress {
  margin: 18px 0 28px 0;
  border-radius: 10px;
  background: #f4f8ff;
  box-shadow: 0 1px 4px 0 rgba(79,140,255,0.04);
}
:deep(.el-table) {
  table-layout: fixed;
}

:deep(.el-table__header-wrapper) .el-table__header,
:deep(.el-table__body-wrapper) .el-table__body {
  width: 100% !important;
}

:deep(.el-table__header) th {
  background-color: transparent;
}

/* 确保单元格对齐 */
:deep(.el-table__header .el-table__cell),
:deep(.el-table__body .el-table__cell) {
  padding: 8px 0;
  text-align: center;
}
</style>